<template>
  <view class="home u-flex-col">
    <u-navbar class="nav" title="筛选" :title-bold="true" back-icon-color="#333333" title-color="#000"></u-navbar>
    <view class="u-p-20 form">
      <u-form :model="form" ref="uForm">
        <u-form-item v-if="form.show" :border-bottom="false" :label-style="labelStyle" label-position="top"
          label="企业处置情况" prop="disposalLevel">
          <chooseBtn :custom-box-style="customBoxStyle" :custom-style="customBtnStyle" :list="btnList"
            :listIsAll="listIsAll" @reset="resetBoolean" :custom-check-style="customCheckStyle" @click="clickBtn">
          </chooseBtn>
        </u-form-item>
        <u-form-item :border-bottom="false" :label-style="labelStyle" label-position="top" label="传感器类型"
          prop="sensorType">
          <b-select v-model="form.sensorType" :options="sensorTypesList" placeholder="请选择传感器类型"
            :placeholder-style="placeholderStyle" :input-style="inputStyle" :cancel-style="customStyle"
            :submit-style="submitStyle" :search-icon="searchSrc"></b-select>
        </u-form-item>
        <u-form-item v-if="form.show || form.showAlarmType" :border-bottom="false" :label-style="labelStyle"
          label-position="top" label="报警类型" prop="alarmType">
          <b-select v-model="form.alarmType" :options="alarmTypesList" placeholder="请选择传感器类型"
            :placeholder-style="placeholderStyle" :input-style="inputStyle" :cancel-style="customStyle"
            :submit-style="submitStyle" :search-icon="searchSrc"></b-select>
        </u-form-item>
        <u-form-item :border-bottom="false" :label-style="labelStyle" label-position="top" label="时间" prop="beginDate">
          <div class="time-body">
            <uni-datetime-picker :border="false" placeholder="请选择开始时间" :start="start" :end="end" return-type="timestamp"
              v-model="form.beginDate" />
          </div>
        </u-form-item>
        <u-form-item :border-bottom="false" label-position="top" prop="endDate">
          <div class="time-body">
            <uni-datetime-picker :border="false" placeholder="请选择结束时间" :start="start" :end="end" return-type="timestamp"
              v-model="form.endDate" />
          </div>
        </u-form-item>
      </u-form>
    </view>
    <view class="confrim-btn u-flex u-row-between u-p-t-20">
      <u-button :hair-line="false" shape="circle" form-type="reset" :custom-style="formCustomStyle" throttle-time="500"
        @click="reset">重置</u-button>
      <u-button :hair-line="false" shape="circle" :custom-style="formSubmitStyle" form-type="submit" throttle-time="500"
        @click="submit">确定</u-button>
    </view>
  </view>
</template>

<script>
import chooseBtn from '@/pages/components/chooseBtn'

export default {
  name: 'screen',
  components: {
    chooseBtn
  },
  data () {
    return {
      emitEvent: '',
      form: {
        disposalLevel: '',
        customerCode: '', //企业编码
        customerName: '', //企业名称
        sensorType: '', // 传感器类型
        alarmType: '', // 报警类型
        beginDate: '', //开始时间
        endDate: '' // 结束时间
      },
      listIsAll: true,
      rules: {},
      customBoxStyle: {
        justifyContent: 'space-start'
      },
      // 报警状态按钮组组件样式
      customBtnStyle: {
        background: '#F1F5F3',
        padding: '0rpx 20rpx',
        marginRight: '20rpx',
        borderRadius: '32rpx',
        fontWeight: 400,
        color: '#666666'
      },
      customCheckStyle: {
        background: '#5BAC844D',
        padding: '0rpx 20rpx',
        marginRight: '20rpx',
        borderRadius: '32rpx',
        border: '1px solid #5BAC84',
        fontWeight: 400,
        color: '#5BAC84'
      },
      // 报警状态按钮组组件数据，数据checked是是否选中的，默认false布尔值，必填，label也是必填
      btnList: [
        {
          label: '企业处置',
          checked: false,
          code: '9',
          id: '1'
        },
        {
          label: '企业未处置',
          checked: false,
          code: '999',
          id: '2'
        }
      ],
      labelStyle: {
        color: '#333333',
        fontWeight: '600'
      },
      sensorTypesList: [],
      alarmTypesList: [],
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: true
      },
      inputStyle: {
        background: '#F1F5F3',
        paddingLeft: '20rpx',
        color: '#999999',
        borderRadius: '20rpx'
      },
      placeholderStyle: 'color:#999999;',
      searchSrc: require('@/static/image/search_icon.svg'),
      formCustomStyle: {
        color: '#333333',
        background: '#F1F5F3',
        width: '40%',
        border: 'none'
      },
      formSubmitStyle: {
        color: '#ffffff',
        background: '#5BAC84',
        width: '40%',
        border: 'none'
      },
      customStyle: {
        // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        color: '#333333',
        background: '#F1F5F3',
        borderRadius: '20rpx',
        width: '40%',
        border: 'none'
      },
      submitStyle: {
        color: '#333333',
        background: '#5BAC84',
        borderRadius: '20rpx',
        width: '40%',
        border: 'none'
      },
      start: '',
      end: ''
    }
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady () {
    this.$refs.uForm.setRules(this.rules)
  },
  async mounted () {
    await this.getSensorTypeDictList()
    this.initBtn()
    this.initTime()
  },

  methods: {
    /**
     * 初始时间范围
     */
    initTime () {
      const { show, showAlarmType } = this.form
      if (show) {
        // alarm
      } else if (!show && showAlarmType) {
        // alarmConfirm
        const time = this.$getStartAndEndTimeByEndTime(Date.now(), 24)
        this.start = time.startTime
        this.end = time.endTime
      }
    },
    resetBoolean () {
      this.listIsAll = false
    },
    initBtn () {
      if (this.form.disposalLevel) {
        if (this.form.disposalLevel === '9999') {
          this.btnList.forEach(item => {
            item.checked = true
          })
        } else {
          for (let i = 0; i < this.btnList.length; i++) {
            if (this.form.disposalLevel === this.btnList[i].code) this.btnList[i].checked = true
          }
        }
      }
      let j = 0
      for (let i = 0; i < this.btnList.length; i++) {
        if (this.btnList[i].checked) {
          j++
        }
      }
      if (j === this.btnList.length) {
        this.listIsAll = false
      }
    },
    //企业处置情况按钮方法
    clickBtn (res) {
      if (res.length === 1) {
        this.$set(this.form, 'disposalLevel', res[0].code)
      } else if (res.length === 2) {
        this.$set(this.form, 'disposalLevel', '9999')
      } else {
        this.$set(this.form, 'disposalLevel', '')
      }
    },
    //获取传感器类型及报警类型列表
    async getSensorTypeDictList () {
      const res = await this.$post('/common/data/getAlarmAndSensorTypeDictList')
      if (res && res.body.sensorTypes) {
        this.sensorTypesList = res.body.sensorTypes.map(item => {
          return {
            ...item,
            disabled: false,
            checked: false,
            name: item.label
          }
        })
      }
      if (res && res.body.alarmTypes) {
        this.alarmTypesList = res.body.alarmTypes.map(item => {
          return {
            ...item,
            disabled: false,
            checked: false,
            name: item.label
          }
        })
      }
    },
    verification () {
      let isSubmit = false
      const date = new Date(this.form.endDate)
      const dateStart = new Date(this.form.beginDate)
      if (date && dateStart && dateStart.getTime() > date.getTime()) {
        uni.showToast({
          title: '结束时间必须大于开始时间',
          icon: 'none',
        })
        isSubmit = false
      } else {
        isSubmit = true
      }
      return isSubmit
    },
    submit () {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          const params = {
            ...this.form,
            beginDate: this.form.beginDate ? this.$date(this.form.beginDate) : '',
            endDate: this.form.endDate ? this.$date(this.form.endDate) : ''
          }
          if (this.verification()) {
            uni.$emit(this.emitEvent, params)
            uni.navigateBack({
              delta: 1
            })
          } else {
            return
          }
        } else {
        }
      })
    },
    reset () {
      this.form = {
        ...this.form,
        disposalLevel: '',
        sensorType: '', // 传感器类型
        alarmType: '', // 报警类型
        beginDate: this.$date(Date.now()).substring(0, 11) + '00:00:00', //开始时间
        endDate: this.$date(Date.now()) // 结束时间
      }
        ; (this.btnList[0].checked = false), (this.btnList[1].checked = false)
      this.initBtn()
      this.initTime()
      this.listIsAll = true
      uni.$emit('handClickScreen', this.form)
      this.$refs.uForm.resetFields(this.rules)
    }
  },
  onLoad (options) {
    const { form, emitEvent } = options
    this.form = JSON.parse(form)
    this.emitEvent = emitEvent
  }
}
</script>

<style lang="scss" scoped>
.home {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;

  .form {
    z-index: 999;
    box-shadow: 0px -3px 3px #f5f5f5;

    /deep/.u-input {
      .u-input__right-icon--select {
        display: none;
      }
    }
  }

  .popup-content {
    padding: 24rpx;
    text-align: center;

    .checkbox {
      &-item {
        height: 100rpx;
      }

      /deep/.u-checkbox-group {
        display: inline;

        .u-checkbox {
          border-bottom: 1px solid #dddddd;
          justify-content: space-between;
          flex-flow: row-reverse;

          .u-checkbox__icon-wrap {
            background: rgba(1, 72, 51, 0.2);
            border: none;
          }
        }
      }

      /deep/.u-radio-group {
        display: inline;

        .u-radio {
          border-bottom: 1px solid #dddddd;
          justify-content: space-between;
          flex-flow: row-reverse;

          .u-radio__icon-wrap {
            background: rgba(1, 72, 51, 0.2);
            border: none;
          }
        }
      }
    }
  }

  .confrim-btn {
    position: absolute;
    width: 100%;
    bottom: 50rpx;
    z-index: 1;
  }
}

.time-body {
  position: relative;
  width: 100%;
}
</style>
